<template>
  <div class="gamecontent">
    <pay-cost-header title="娱乐">
      <i class="iconback"
         slot="back"
         @click="headBackClick"></i>
    </pay-cost-header>
    <div class="gamebox">
      <ul class="f-clear">
        <li v-for="(item,index) in gameList"
            :key="index"
            @click="itemClick(item.game_router)">
          <a>
            <div class="gameimg"><img :src="item.game_pic" /></div>
            <p class="gamename">{{item.game_name}}</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import urls from '../../common.js'
import PayCostHeader from '../common/PayCostHeader'
export default {
  name: 'Game',
  data () {
    return {
      gameList: [
        {
          game_name: '五子棋',
          game_pic: '../../../static/gameindex/wzq.png',
          game_router: '/wzq'
        },
        {
          game_name: '别踩白快',
          game_pic: '../../../static/gameindex/bcbk.png',
          game_router: '/bcbk'
        },
        {
          game_name: '连连看',
          game_pic: '../../../static/gameindex/llk.png',
          game_router: '/llk'
        },
        {
          game_name: '扫雷',
          game_pic: '../../../static/gameindex/saolei.png',
          game_router: '/saolei'
        }
      ]
    }
  },
  components: {
    PayCostHeader
  },
  mounted () {
    // this.$http.get(urls.gameList).then(result => {
    //   if (result.body.code === '200') {
    //     this.gameList = result.body.data
    //     console.log(this.gameList)
    //   }
    // })
  },
  methods: {
    headBackClick () {
      this.$router.go(-1)
    },
    itemClick (itemurl) {
      this.$router.push(itemurl)
    }
  }
}
</script>

<style lang="stylus" scoped>
.gamecontent {
  display: block;
  height: 100%;
  background: url('../../../static/images/games/ganmebg.png') no-repeat;
  background-size: 100% 100%;
}

.iconback {
  display: inline-block;
  width: 0.18rem;
  height: 0.3rem;
  background: url('../../../static/images/pay/back.png') 100% 100%;
  background-size: 100% 100%;
  vertical-align: -0.04rem;
  margin-right: 0.08rem;
  cursor: pointer;
}

.gamebox ul {
  padding-top: 0.48rem;
  text-align: center;
}

.gamebox ul li {
  list-style: none;
  width: 3.4rem;
  display: inline-block;
  margin: 0.6rem 0.5rem 0 0.5rem;
}

.gamebox ul li .gameimg {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  background: #2cc4b2;
  box-shadow: 0px 10px 43.24px 2.76px rgba(121, 122, 231, 0.3);
  border-radius: 0.2rem;
  overflow: hidden;
}

.gamebox ul li .gameimg img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.gamebox ul li p {
  text-align: center;
  font-size: 0.48rem;
  color: #4c4c4c;
  line-height: 1;
  padding: 0.2rem 0;
}
</style>
